<!-- src/components/UserSteps.vue -->
<template>
    <div class="horizontal-steps">
        <div class="steps-container">
            <div v-for="(step, index) in steps" :key="index" class="step-item"
                :class="{ 'active': currentStep === index, 'completed': index < currentStep }">
                <div class="step-icon">
                    <van-icon v-if="index < currentStep" name="success" class="completed-icon"
                        @click="clickIcon(index)" />
                    <van-icon v-else-if="index === currentStep" :name="step.icon" class="active-icon" />
                    <div v-else class="pending-icon"> <van-icon :name="step.icon" /></div>
                </div>
                <div class="step-content">
                    <div class="step-title">{{ step.title }}</div>
                </div>
                <div v-if="index < steps.length - 1" class="step-connector"
                    :class="{ 'completed': index < currentStep }"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'


const router = useRouter()
// 定义组件属性，支持外部传入当前步骤
const props = defineProps<{
    currentStep?: number
}>()

// 定义步骤数据（不包含组织测评）
const steps = ref([
    {
        title: '基础信息',
        icon: 'manager'
    },
    {
        title: '组织架构',
        icon: 'cluster'
    },
    {
        title: '成员信息',
        icon: 'friends'
    }
])

// 当前步骤（0-2）
// 默认步骤为2（索引为1），支持外部传入
const currentStep = ref(props.currentStep ?? 1)
const clickIcon = (index: number) => {
    switch (index) {
        case 0:
            // 跳转到基础信息页面
            router.replace('/basicInfo')
            break
        case 1:
            // 跳转到组织架构页面
            router.replace('/formPage')
            break
    }
}
</script>

<style scoped>
.horizontal-steps {
    width: 90vw;
    padding: 5px;
    background: white;
    border-radius: 10px;
}

.steps-container {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.step-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    z-index: 2;
}

.step-connector {
    position: absolute;
    top: 14px;
    left: 50%;
    right: -50%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}

.step-connector.completed {
    background-color: #07c160;
}

.step-content {
    text-align: center;
}

.step-title {
    font-size: 12px;
    color: #999;
}

/* 未完成步骤样式 */
.pending-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f5f5f5;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* 当前步骤样式 */
.step-item.active .step-icon {
    background-color: #1989fa;
    color: white;
}

.step-item.active .active-icon {
    font-size: 16px;
}

.step-item.active .step-title {
    color: #1989fa;
    font-weight: 500;
}

/* 已完成步骤样式 */
.step-item.completed .step-icon {
    background-color: #07c160;
    color: white;
}

.step-item.completed .completed-icon {
    font-size: 16px;
}

.step-item.completed .step-title {
    color: #07c160;
}
</style>